<template>
    <div class="register">
        <van-nav-bar
          title=""
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <h3>注册</h3>
        <div class="register_box">
            <van-form>
              <van-cell-group inset>
                <van-field
                  v-model="user_nick_name"
                  name="用户名"
                  label="用户名"
                  placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                  v-model="user_acc"
                  name="用户账号"
                  label="用户账号"
                  placeholder="用户账号"
                  :rules="[{ required: true, message: '请填写用户账号' }]"
                />
                <van-field
                  v-model="user_pwd"
                  type="password"
                  name="用户密码"
                  label="用户密码"
                  placeholder="用户密码"
                  :rules="[{ required: true, message: '请填写用户密码' }]"
                />
              </van-cell-group>
              <div class="register_tips">
                <span @click="clearFn">重置</span>
              </div>
              <div style="margin: 16px;">
                <van-button round block type="primary" @click="registerFn">
                  提交
                </van-button>
              </div>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue'
    import { userRegister } from '../api/index'
    import { showDialog } from 'vant';
    import { useRouter } from 'vue-router'
    const $router = useRouter();
    let user_acc = ref("");
    let user_pwd = ref("");
    let user_nick_name = ref("");

    //返回上一级
    const onClickLeft = () => history.back();

    //重置
    const clearFn = ()=>{
        user_nick_name.value = '';
        user_acc.value = '';
        user_pwd.value = '';
    }

    //注册
    const registerFn = async()=>{
        // const that = this;
        await userRegister({user_nick_name:user_nick_name.value,user_acc:user_acc.value,user_pwd:user_pwd.value}).then(
            (content:any)=>{
                console.log(content)
                let {code} = content;
                // console.log(result,code)
                if(code == 200) {
                    // 登录成功
                    showDialog({
                      title: '',
                      message: `注册成功`,
                    }).then(() => {
                      // 延迟跳转登录页面
                        setTimeout(() => {
                            $router.replace({path: '/login'})
                        }, 150);
                    });
                }
                else{
                    showDialog({
                      title: '',
                      message: '注册失败',
                    }).then(() => {
                      // 延迟跳转首页
                    });
                }
            }
        )
    }
</script>

<style lang="less" scoped>
    .register{
        h3{
            margin-top: 50px;
            text-align: center;
        }
        .register_box{
            margin-top: 20px;
            input{
                margin-bottom: 20px;
            }
            .register_tips{
                margin-top: 10px;
                display: flex;
                font-size: 14px;
                color: red;
                a{
                    color: red;
                    text-decoration: underline;
                }
                span{
                    text-decoration: underline;
                }
                justify-content: center;
            }
        }
    }
</style>